<template>
  <div class="tw-libnativeplayer">
    <template v-if="autoplay">
      <video
        v-if="loop"
        loop="loop"
        autoplay
        muted
        :width="width"
        :height="height"
        :src="data.url">
      </video>

      <video
        v-else
        autoplay
        muted
        :width="width"
        :height="height"
        :src="data.url">
      </video>
    </template>

    <template v-else>
      <video
        v-if="loop"
        controls
        loop="loop"
        :width="width"
        :height="height"
        :src="data.url">
      </video>

      <video
        v-else
        ref="player"
        controls
        :width="width"
        :height="height"
        :src="data.url">
      </video>
    </template>

    <div v-if="disabledClick" class="tw-libnativeplayer-cover"></div>
  </div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'

export default {
  name: 'lib-nalibnativeplayerme',

  mixins: [props, style],

  props,

  computed: {
    style () {
      return {
      }
    }
  },

  methods: {
    setStyle () {
      const style = `
        ::root.tw-libname {
          color: ${this.color};
        }
      `

      this.addStyle(style)
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
